<template>
  <section>
    <el-form label-width="80px" size="mini">
      <el-form-item label="sn">
        <el-input style="width: 200px" v-model="card.sn"></el-input>
      </el-form-item>
      <el-form-item label="标题" >
        <el-input style="width: 200px" v-model="card.title"></el-input>
      </el-form-item>
      <el-form-item label="计量" style="border: 0px solid red">
        <div class="check-box">
          <el-switch v-model="card.isNumber" active-text="设置" inactive-text="关闭" />
          <div v-if="card.isNumber">
            <el-input size="mini" style="width: 200px" v-model="card.totalValue" placeholder="请输入数量"/>
            <el-input size="mini" style="width: 100px" v-model="card.unit" placeholder="请输入单位"/>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="计时" >
        <div class="check-box">
          <el-switch v-model="card.isTime" active-text="设置" inactive-text="关闭"/>
          <div v-if="card.isTime">
            <el-input size="mini" style="width: 100px" v-model="card.timeValue" placeholder="请输入时间"/>
            <el-radio-group v-model="card.timeType" >
              <el-radio v-for="unit in timeList" :key="unit.code" :label="unit.code">{{unit.name}}</el-radio>
            </el-radio-group>
            <!--<el-input class="input-box" v-for="(time,i) in timeList" :key="time.code" v-model="time.val">-->
              <!--<span slot="suffix">{{time.name}}</span>-->
            <!--</el-input>-->
          </div>
        </div>
      </el-form-item>
      <!--<el-form-item label="单位">-->
        <!--<div v-if="card.isNumber">次</div>-->
        <!--<el-radio-group v-model="card.unit" v-else-if="card.isTime">-->
          <!--<el-radio v-for="unit in timeList" :key="unit.code" :label="unit.name">{{unit.name}}</el-radio>-->
        <!--</el-radio-group>-->
      <!--</el-form-item>-->
      <el-form-item label="">
        <el-button size="mini" type="success" @click="confirmBtn(card)">{{card.id?'保存':'新建'}}</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "editCard",
    props:['card'],
    data(){
      return{
        timeList:[
          {code:'YYYY',val:0,name:'年'},
          {code:'MM',val:0,name:'月'},
          {code:'WW',val:0,name:'周'},
          {code:'DD',val:0,name:'天'},
          // {code:'HH',val:0,name:'小时'},
          // {code:'mm',val:0,name:'分钟'},
        ],
      }
    },
    computed: {
      ...mapGetters(['department']),
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      makeCardData(card){
        let data={
          title:card.title,
          departmentId:card.departmentId,
          sn:card.sn,
          isTime:card.isTime,
          isNumber:card.isNumber,
          data:card.data
        }
        if(card.isTime){
          if(card.timeValue <=0){
            this.$message({type:'error',message:'请确认时间！'})
            return false
          }else {
            // data.timeValue=parseFloat(card.timeValue)
            console.log('card.timeValue-------',card.timeValue,parseFloat(card.timeValue))
            data.timeType=card.timeType
            data.timeValue=parseFloat(card.timeValue)
          }
        }else if(!card.isNumber){
          this.$message({type:'error',message:'至少选择一种计数方式！'})
          return false
        }
        if(card.isNumber){
          if(card.unit === ''){
            this.$message({type:'error',message:'单位不能为空！'})
            return false
          }else data.unit=card.unit
          if(card.totalValue <=0){
            this.$message({type:'error',message:'请确认数量！'})
            return false
          }else data.totalValue=parseFloat(card.totalValue)
        }
        console.log('data.timeValue------',data.timeValue)
        return data
      },
      confirmBtn(card){
        let data=this.makeCardData(card)
        if(!data) return
        console.log('timeList--------',data)
        if(card.id){
          data.id=card.id
          this.updateECardDefine(data)
        }
        else this.createECardDefine(data)
      },
      createECardDefine(data){
        this.fetch({name:"createECardDefine",data})
          .then(res=>{
            console.log(res)
            this.$message({type: 'success', message: '新建成功！'})
            this.$emit('cancel')
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateECardDefine(data){
        this.fetch({name:"updateECardDefine",data})
          .then(res=>{
            console.log(res)
            this.$message({type: 'success', message: '更新成功！'})
            this.$emit('cancel')
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>
  .input-box{
    width: 100px;
    margin-right: 5px;
  }
  .check-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0px solid red;
    margin-top: 3px;
    /*padding: 3px;*/
    /*height: 80px;*/
  }
  .el-switch{
    margin-bottom: 10px;
  }
</style>
